<!doctype html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>websocket集群</title>
</head>
<body>
本服务端口号：[[${port}]]，使用redismq实现websocket集群<br/>
[[${topic}]] 频道 聊天中。。。<br/>
<input id="input_id" type="text"/>
<button onclick="sendMessage()">发送</button>
<button onclick="closeWebsocket()">关闭</button>
<div id="message_id"></div>
</body>
<script type="text/javascript">
document.getElementById('input_id').focus();
var websocket = null;
// 当前浏览前是否支持websocket
if ("WebSocket" in window) {
    var url = "ws://127.0.0.1:[[${port}]]/websocket/[[${topic}]]/[[${openid}]]";
    websocket = new WebSocket(url);
} else {
    console.error("浏览器不支持websocket");
}

websocket.onopen = function (event) {
    setMessage("打开连接");
}

websocket.onclose = function (event) {
    setMessage("关闭连接");
}

websocket.onmessage = function (event) {
    setMessage(event.data);
}

websocket.onerror = function (event) {
    setMessage("连接异常");
}

// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
    closeWebsocket();
}

// 关闭
function closeWebsocket() {
    //3代表已经关闭
    if (3 != websocket.readyState) {
        websocket.close();
    } else {
        console.warn("websocket之前已经关闭");
    }
}

// 显示消息
function setMessage(message) {
    document.getElementById('message_id').innerHTML += message + '<br/>';
}

// 发送消息
function sendMessage() {
    //1代表正在连接
    if (1 == websocket.readyState) {
        var message = document.getElementById('input_id').value;
        websocket.send(message);
    } else {
        console.warn("websocket未连接");
    }
    document.getElementById('input_id').value = "";
    document.getElementById('input_id').focus();
}
</script>
</html>